﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebSite.cn.index" %>

<%@ Register Src="head.ascx" TagName="head" TagPrefix="uc1" %>
<%@ Register Src="bottom.ascx" TagName="bottom" TagPrefix="uc3" %>
<%@ Register Src="NewBulletin.ascx" TagName="NewBulletin" TagPrefix="uc2" %>
<%@ Register src="SearchProducts.ascx" tagname="SearchProducts" tagprefix="uc8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title><%=WebSite. info.info1("", "shoptitle")%></title>
    <meta name="Description" content="<%=WebSite.info.info1("","shopcontent")%>" /> 
    <meta name="Keywords" content="<%=WebSite.info.info1("","shopkey")%>" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript">

        function setBulletinClose() {

            document.getElementById("divBulletin").style.display = "none";
        }
    
    </script>

</head>
<body>
 <center>
    <form id="form1" runat="server" >
	<uc1:head ID="head_1" runat="server" />   

<div id="container">
     
     <div style="width:980px;">
   <div id="left"> 
	   <uc2:NewBulletin ID="NewBulletin_1" runat="server" />
       <a href="ProfessionArea.aspx?sid=2"  title="专区有效期内的卡券" target="_self"><img style="margin:5px 0px 0px -10px;" border="0" src="images/exchange.png" width="200px" height="36px" alt="" /></a>
        <a href="login.aspx?sid=2" title="第二个有效期内的卡券"  target="_self"><img style="margin:0px 0px 2px -10px;" border="0" src="images/exchange2.png" width="200px" height="36px" alt="" />
       </a> 
   </div>
      <div class="banner" style="float:left">
       <div class="flash">			      
				  <div class="container" id="idTransformView">					  
					  <ul class="slider" id="idSlider">
					   <%=imgLink%>
					  					  
					  </ul>
					  <ul class="num" id="idNum">
					  
					  	<%=imgNumber%>		  									  
					  </ul>
				  </div>
			 </div>
      </div>
  </div>


  <div style="float:left;">
              <a href="hotpro.aspx?sid=3"><img src="../images/lpk.jpg" width="980px"; alt="礼品卡展示" /></a> 
	             <table border="0" cellpadding="0" cellspacing="0" class="table_pro">
                   <tr>
                     <%=hotmsg3%>
                   </tr>
                 </table>
          
          <br />
              <a href="hotpro.aspx?sid=1" ><img src="../images/tj.jpg" width="980px"; alt="商品推荐" /></a>   
	             <table border="0" cellpadding="0" cellspacing="0" class="table_pro">
                   <tr>
                     <%=hotmsg1%>
                   </tr>
               <tr><td style="height:50px;"></td></tr>
                 </table>
                <br/>
  </div>
  
  
  <div id="divBulletin"  style=" position:fixed; background-image:url('/images/bulletin.jpg'); display:<%= IsVisibleBulletin %>; top:100px; left:300px; width:670px; height:460px;">

    <div style=" margin-left:615px;">
    <img style="cursor:pointer;" onclick="setBulletinClose()" src="/images/close.jpg" alt="" />
    </div>
    <div style="text-align:left; margin-top:30px; padding:0 10px 10px 10px; width:640px; height:350px; overflow:scroll;"> <%= BulletinMsg%>
     
    </div>

    <div></div>
</div>

  </div>
  
   <uc3:bottom ID="bottom_1" runat="server" />


    </form>
    </center>
</body>
</html>


<script type="text/javascript">
    var MYJS = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };

    var Class = {
        create: function () {
            return function () {
                this.initialize.apply(this, arguments);
            }
        }
    }

    Object.extend = function (destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }

    var TransformView = Class.create();
    TransformView.prototype = {
        //容器对象,滑动对象,切换参数,切换数量
        initialize: function (container, slider, parameter, count, options) {
            if (parameter <= 0 || count <= 0) return;
            var oContainer = MYJS(container), oSlider = MYJS(slider), oThis = this;

            this.Index = 0; //当前索引

            this._timer = null; //定时器
            this._slider = oSlider; //滑动对象
            this._parameter = parameter; //切换参数
            this._count = count || 0; //切换数量
            this._target = 0; //目标参数

            this.SetOptions(options);

            this.Up = !!this.options.Up;
            this.Step = Math.abs(this.options.Step);
            this.Time = Math.abs(this.options.Time);
            this.Auto = !!this.options.Auto;
            this.Pause = Math.abs(this.options.Pause);
            this.onStart = this.options.onStart;
            this.onFinish = this.options.onFinish;

            oContainer.style.overflow = "hidden";
            oContainer.style.position = "relative";

            oSlider.style.position = "absolute";
            oSlider.style.top = oSlider.style.left = 0;
        },
        //设置默认属性
        SetOptions: function (options) {
            this.options = {//默认值
                Up: true, //是否向上(否则向左)
                Step: 5, //滑动变化率
                Time: 10, //滑动延时
                Auto: true, //是否自动转换
                Pause: 2000, //停顿时间(Auto为true时有效)
                onStart: function () { }, //开始转换时执行
                onFinish: function () { } //完成转换时执行
            };
            Object.extend(this.options, options || {});
        },
        //开始切换设置
        Start: function () {
            if (this.Index < 0) {
                this.Index = this._count - 1;
            } else if (this.Index >= this._count) { this.Index = 0; }

            this._target = -1 * this._parameter * this.Index;
            this.onStart();
            this.Move();
        },
        //移动
        Move: function () {
            clearTimeout(this._timer);
            var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep
(this._target, iNow);

            if (iStep != 0) {
                this._slider.style[style] = (iNow + iStep) + "px";
                this._timer = setTimeout(function () { oThis.Move(); }, this.Time);
            } else {
                this._slider.style[style] = this._target + "px";
                this.onFinish();
                if (this.Auto) { this._timer = setTimeout(function () { oThis.Index++; oThis.Start(); }, this.Pause); }
            }
        },
        //获取步长
        GetStep: function (iTarget, iNow) {
            var iStep = (iTarget - iNow) / this.Step;
            if (iStep == 0) return 0;
            if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
            return iStep;
        },
        //停止
        Stop: function (iTarget, iNow) {
            clearTimeout(this._timer);
            this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
        }
    };

    window.onload = function () {
        function Each(list, fun) {
            for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
        };

        var objs = MYJS("idNum").getElementsByTagName("li");

        var tv = new TransformView("idTransformView", "idSlider", 300, objs.length, {
            onStart: function () { Each(objs, function (o, i) { o.className = tv.Index == i ? "on" : ""; }) } //按钮样式
        });

        tv.Start();

        Each(objs, function (o, i) {
            o.onmouseover = function () {
                o.className = "on";
                tv.Auto = false;
                tv.Index = i;
                tv.Start();
            }
            o.onmouseout = function () {
                o.className = "";
                tv.Auto = true;
                tv.Start();
            }
        });

    }



</script>
